<template>
  <div class="screen-block">
    <Title>支付渠道占比</Title>
    <div style="width: 100%; height: 90%">
      <Charts :option="option" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Title from '../title.vue';
import { Charts } from '@kjgl77/datav-vue3';
const option = ref({
  series: [
    {
      type: 'pie',
      data: [
        { name: '收费系统', value: 93 },
        { name: '通信系统', value: 32 },
        { name: '监控系统', value: 65 },
        { name: '供配电系统', value: 44 },
        { name: '其他', value: 52 },
      ],
      radius: ['45%', '65%'],
      insideLabel: {
        show: false,
      },
      outsideLabel: {
        labelLineEndLength: 10,
        formatter: '{percent}%\n{name}',
        style: {
          fontSize: 14,
          fill: '#fff',
        },
      },
    },
  ],
  color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
});
</script>

<style lang="scss">
.screen-block {
  width: 100%;
  height: 100%;
}
</style>
